<template>
	<view class="good-info">
		<view class="goodImg">
			<u-image width="100%" height="450rpx" :src="goodsInfo[0].cover_url"></u-image>
		</view>

		<view class="name">
			{{goodsInfo[0].title}}
		</view>
		<view class="pricebox">
			<text class="oldPrice u-line-1">￥3999999999 </text>
			<text class="price">￥999999 </text>
			<text class="sales">销量 {{goodsInfo.sales}}</text>
		</view>

		<u-tabs class="tabs" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>

		<view class="centerContent">
			<!-- 商品详情 -->
			<view class="u-content" v-if="this.current==0">
				<u-parse :html="goodsInfo.details"></u-parse>
			</view>
			<!-- 评论组件 -->
			<goods-comment v-else-if="this.current==1" :commentlist='this.commentlist' />

			<!-- 推荐商品 -->
			<view class="wrap u-skeleton" v-else>
				<u-row gutter="16">
					<!-- 必须循环为对象 防止组件内部报错 -->
					<u-col span="6" v-for="(item,index) in goodslist.length !==0 ? goodslist : [{},{},{},{}]"
						:key='index'>
						<!-- 商品列表 -->
						<goods-card :item='item' />	
					</u-col>

				</u-row>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="navigation">
			<view class="left">
				<view class="item" @click="collect">
					<u-icon name="star" :size="40" :class="{isshowColor:isshowColor}"></u-icon>
					<view class="text u-line-1" :class="{isshowColor:isshowColor}">收藏</view>
				</view>

				<view class="item car">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1">加入购物车</view>
				<view class="buy btn u-line-1">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'goods-info',
		data() {
			return {
				src: '//img.alicdn.com/bao/uploaded/i3/1721181839/O1CN01AEbLyp1PSJ44C9LLe_!!2-item_pic.png_468x468q75.jpg_.webp',
				list: [{
					name: '商品详情'
				}, {
					name: '商品评论',
					count: 0
				}, {
					name: '推荐商品'

				}],
				current: 0,
				goodsId: null, //点击的商品id
				goodsInfo: [{
					cover_url: 'https://img.alicdn.com/imgextra/i1/508110693/O1CN01qkU19v1GzRBBhd923_!!508110693-0-picasso.jpg_430x430q90.jpg',
					title: '99秋装上新限时7.5折】法式翻领长袖条纹衬衫女设计感小众衬衣',

				}], //商品详情
				goodslist: [], //推荐商品
				commentlist: [], //评论
				isshowColor: false
			};
		},
		onLoad(option) {
			this.goodsId = option.id

			// this.getData()
		},
		methods: {
			// async getData(){
			// 		const res = await this.$u.api.goodsInfo(this.goodsId)
			// 		console.log(res)
			// 		this.goodsInfo = res.goods
			// 		this.commentlist = res.goods.comments
			// 		this.goodslist = res.like_goods
			// 		this.list[1].count =res.goods.comments.length

			// 	},

			change(index) {
				this.current = index;
			},
			//收藏
			collect() {
				//请求api


				if (this.isshowColor == false) {
					//完成之后显示提示 并改变标签状态
					this.$u.toast('已收藏')
					this.isshowColor = !this.isshowColor
				} else {
					this.$u.toast('已取消收藏')
					this.isshowColor = !this.isshowColor
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	.good-info {
		.name {
			font-size: 18px;
			padding-left: 40rpx;
			color: #070707;
			margin: 30rpx 0;
			font-weight: 600;
		}

		.pricebox {
			display: flex;
			margin: 25rpx 0;
			font-size: 18px;
			font-weight: 500;

			.oldPrice {
				font-size: 13px;
				font-weight: 300;
				text-decoration: line-through;
				padding-left: 20rpx;
				width: 15%;
			}

			.price {
				color: red;
                width: 60%;
			}

			.sales {
				width: 20%;
				color: #797979;
				
			}
		}
	}


	.isshowColor {
		color: red;
	}

	.centerContent {
		position: fixed;
		top: 400px;
		bottom: 54.8px;
		overflow-y: scroll;

		// 富文本商品介绍
		.u-content {

			text-indent: 2em;
			font-size: 16px;
		}

	}



	// 底部导航
	.navigation {
		display: flex;
		position: fixed;
		bottom: 0;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			margin-left: 60rpx;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 40rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
